<template>
  <div class="hello">
    <div class="home">
      <div class="main">
        <div style="border: 1px solid #DCDFE6;width: 98%">
          <div class="tablehead">
            <div style="display: flex; line-height: 30px;margin-top: 5px;">
              <div style="height: 20px;width: 5px;background-color: #47ACF4;margin-right: 10px;margin-top: 5px;"></div>
              <span>延期申请记录</span>
            </div>
            <div style="margin-left: auto;">
              <div style="height: 40px;margin-top: 5px;">
                <el-button type="primary" style="height: 30px;" @click="dialogTableVisible = true">延期申请</el-button>
                <el-button style="margin-right: 20px;height: 30px;">刷新</el-button>
              </div>
            </div>
          </div>
          <div style="height: 20vh;">
            <el-table :data="tableData" :cell-style="tableStyle" :header-cell-style="headerCellStyle" style="width: 100%">
              <el-table-column v-for="(column, index) of columns" :key="index" :prop="column.prop" :label="column.label"
                :fixed="column.fixed" :width="column.width">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button @click="editRow(scope.row)" type="text" size="small">撤回</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="bottomAll">
          <div class="bottomTitle">
            <span class="bottomText">流程日志（2）</span>
          </div>
          <div style="height: 300px;width: 100%;">
            <div style="display: flex; margin-left: 20px;" v-for=" item in flowList">
              <div>
                <img style="width: 40px;height: 40px;" src='@/assets/head/head.png' alt="">
              </div>
              <div style="display: flex; flex-direction: column;margin-left: 20px;">
                <span
                  style="font-family: PingFangSC-Regular;font-weight: 400;font-size: 14px;color: #303133;line-height: 24px;">{{
                    item.user }}（{{ item.name }}）</span>
                <div style="display: flex; flex-direction: column; border-left: 3px solid #DCDFE6 ;height: 55px;">
                  <span
                    style=" margin-left: 20px;font-family: PingFangSC-Regular;font-weight: 400;font-size: 12px;color: #606266;letter-spacing: 0;line-height: 20px;">{{
                      item.flow }}</span>
                  <span
                    style=" margin-left: 20px;font-family: PingFangSC-Regular;font-weight: 400;font-size: 12px;color: #C0C4CC;letter-spacing: 0;line-height: 20px;">
                    {{ item.time }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="任务延期申请" :visible.sync="dialogTableVisible">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="应完成时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="延期原因">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="延期至">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <el-upload style="text-align: center;" class="upload-demo" drag
            action="https://jsonplaceholder.typicode.com/posts/" multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
      </el-form>

      <div style="text-align: right;">
        <el-button type="primary" style="height: 30px;" @click="">确定</el-button>
        <el-button style="height: 30px;" @click="dialogTableVisible = false">取消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/NormalTable'
export default {
  components: {
    Table,
  },
  data() {
    return {
      dialogTableVisible: false,
      headerCellStyle: {
        "background-color": '#F5F7FA',
        'text-align': 'center',
        'font-family': 'PingFangSC-Medium',
        'font-weight': 500,
        'font-size': '14px',
        'color': '#606266',
        'line-height': '22px'
      },
      tableStyle: {
        "text-align": 'center',
      },
      formInline: {
        user: '',
        region: ''
      },
      flowList: [{
        head: '@/assets/head/head.png',
        user: '生产部门负责人',
        name: '新建任务',
        flow: '发起流程',
        time: '2023-11-21 15：20：00'
      }, {
        head: '@/assets/head/head.png',
        user: '总工办生产管理员',
        name: '审批',
        flow: '通过流程',
        time: '2023-11-23 15：20：00'
      }],
      columns: [
        { prop: 'xh', label: '序号', width: '100', fixed: false },
        { prop: 'bh', label: '发文部门', width: '', fixed: false },
        { prop: 'htdjh', label: '申请人', width: '', fixed: false },
        { prop: 'xmlx', label: '申请日期', width: '', fixed: false },
        { prop: 'ydwcsj', label: '原定完成时间', width: '', fixed: false },
        { prop: 'yqrq', label: '延期日期', width: '', fixed: false },
        { prop: 'xmmc', label: '状态', width: '', fixed: false },
        { prop: 'yqyy', label: '延期原因', width: '', fixed: false },
        { prop: 'lxdw', label: '附件', width: '', fixed: false },
      ],
      tableData: [{
        xh: '1',
        bh: '基础数据部',
        htdjh: '张艺',
        xmlx: '2023-11-22',
        xmmc: '已通过',
        lxdw: 'XXXX',
        yqyy: '爱神的箭奥施康定好'

      }],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
    }
  },
  mounted() {
    console.log(this.$route.path)
  },
  methods: {
    view(row) {
      this.$router.push('/projectDetails');
    },
    editRow(row) {
    },
    delete(row) {
    },
    newProject() {
      this.$router.push('/newProject');
    }
  }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  width: 100wh;
  /* height: 100vh; */
  padding: 0px;
  /* background-color: aqua; */
  font-weight: 500;

  .top {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    width: 100wh;
    height: 12vh;
    padding: 0px;
    /* background-color: rgb(0, 255, 55); */

    .top-item {
      display: flex;
      flex-direction: column;
      padding-left: 30px;
      /* width: 120px; */

      .greenPoint {
        background-color: #2ABF73;
        height: 10px;
        width: 10px;
        margin-right: 5px;
        margin-top: 19px;
        border-radius: 5px;
        margin-left: 10px;
      }
    }
  }

  .bottomAll {
    background-color: #FFFFFF;
    width: 103%;
    margin-top: 10px;

    .bottomTitle {
      width: 100%;
      height: 46px;
      align-items: center;
      border-bottom: 2px solid #DCDFE6;
      margin-bottom: 30px;
      display: flex;
      align-items: center;

      .bottomText {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 16px;
        color: #303133;
        line-height: 24px;
        margin-left: 20px;
      }
    }
  }

  .main {
    margin-top: 10px;
    background-color: #FFFFFF;

    .tablehead {
      display: flex;
      width: 100%;

    }
  }
}
</style>
